{% extends 'base.html' %}
{% block title %}{{ grade.name }}年级{{ semester.school_year }}学年{{ semester.get_name_display }} 日程表管理{% endblock %}

{% block content %}
<script src='{% static "fullcalendar/index.global.min.js" %}'></script>
<script src='{% static "fullcalendar/zh-cn.global.min.js" %}'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script>


<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4>{{ grade.name }}年级{{ semester.school_year }}学年{{ semester.get_name_display }} 日程表管理</h4>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

 <div id='calendar'></div>

<!-- 日程编辑模态框 -->
<div class='modal fade' id='scheduleModal' tabindex='-1' aria-labelledby='scheduleModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='scheduleModalLabel'>编辑日程</h5>
        <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
      </div>
      <div class='modal-body'>
        <form id='scheduleForm'>
          {% csrf_token %}
          <input type='hidden' id='scheduleId' name='id'>
          <input type='hidden' name='grade_id' value='{{ grade.id }}'>
          <div class='mb-3'>
            <label for='scheduleDate' class='form-label'>日期</label>
            <input type='date' class='form-control' id='scheduleDate' name='date' required>
          </div>
          <div class='mb-3'>
            <label for='isClassDay' class='form-label'>状态</label>
            <select class='form-select' id='isClassDay' name='is_class_day' required onmousedown="event.stopPropagation();" onclick="event.stopPropagation();">
              <option value='1'>正常上课</option>
              <option value='2'>调休</option>
              <option value='3'>课后服务</option>
              <option value='4'>考试</option>
              <option value='0'>休息日</option>
            </select>
          </div>
        </form>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>取消</button>
        <button type='button' class='btn btn-danger' id='deleteSchedule' style='display: none;'>删除</button>
        <button type='button' class='btn btn-primary' id='saveSchedule'>保存</button>
      </div>
    </div>
  </div>
</div>

<script>
    // 检查jQuery是否加载
    if (typeof jQuery === 'undefined') {
        console.error('jQuery未加载！');
        alert('系统错误：jQuery库未正确加载，请刷新页面');
    } else {
        console.log('jQuery已加载，版本:', jQuery.fn.jquery);
    }

    // 确保DOM加载完成
    $(document).ready(function() {
        console.log('DOM加载完成，开始初始化...');
        console.log('页面元素检查:');
        console.log('- 日历容器:', $('#calendar').length);
        console.log('- 保存按钮:', $('#saveSchedule').length);
        console.log('- 模态框:', $('#scheduleModal').length);
        console.log('- CSRF令牌:', $('input[name=csrfmiddlewaretoken]').length);
        // 初始化模态框实例
        var scheduleModal = new bootstrap.Modal($('#scheduleModal')[0], {
            backdrop: true,
            keyboard: true
        });

        // 将表格数据转换为FullCalendar事件
        var scheduleEvents = [
            {% for schedule in schedules %}
            {
                id: '{{ schedule.id }}',
                title: '{% if schedule.is_class_day == 1 %}正常上课{% elif schedule.is_class_day == 2 %}调休{% elif schedule.is_class_day == 3 %}课后服务{% elif schedule.is_class_day == 4 %}考试{% else %}休息日{% endif %}',
                start: '{{ schedule.date|date:"Y-m-d" }}',
                {% if schedule.is_class_day == 1 %}
                color: 'green',
                {% elif schedule.is_class_day == 2 %}
                color: 'blue',
                {% elif schedule.is_class_day == 3 %}
                color: 'purple',
                {% elif schedule.is_class_day == 4 %}
                color: 'red',
                {% else %}
                color: 'gray',
                {% endif %}
                allDay: true
            }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];

        // 初始化日历
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'zh-cn',
            events: scheduleEvents,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridYear,dayGridMonth,timeGridWeek,timeGridDay'
            },
            buttonText: {
                today: '今天',
                year: '年',
                month: '月',
                week: '周',
                day: '日'
            },
            // 点击事件时显示编辑模态框
            eventClick: function(info) {
                // 填充模态框数据
                $('#scheduleId').val(info.event.id);
                $('#scheduleDate').val(info.event.startStr);
                
                // 根据事件标题设置下拉菜单的值
                const isClassDaySelect = $('#isClassDay');
                if (info.event.title === '正常上课') {
                    isClassDaySelect.val('1');
                } else if (info.event.title === '调休') {
                    isClassDaySelect.val('2');
                } else if (info.event.title === '课后服务') {
                    isClassDaySelect.val('3');
                } else if (info.event.title === '考试') {
                    isClassDaySelect.val('4');
                } else {
                    isClassDaySelect.val('0');
                }
                
                // 显示或隐藏删除按钮
                $('#deleteSchedule').css('display', $('#scheduleId').val() ? 'block' : 'none');
                
                // 显示模态框
                scheduleModal.show();
            },
            // 点击日期时显示添加模态框
            dateClick: function(info) {
                // 清空ID，表示添加新记录
                $('#scheduleId').val('');
                // 设置日期
                $('#scheduleDate').val(info.dateStr);
                // 默认选中正常上课
                $('#isClassDay').val('1');
                // 隐藏删除按钮
                $('#deleteSchedule').css('display', 'none');
                // 显示模态框
                scheduleModal.show();
            }
        });
        calendar.render();
        
        // 删除日程按钮点击事件
        $('#deleteSchedule').on('click', function() {
            var scheduleId = $('#scheduleId').val();
            if (!scheduleId) return;

            if (confirm('确定要删除这个日程吗？')) {
                var url = '{% url 'core:grade_leader_schedule_delete_ajax' grade_id=grade.id pk=0 %}'.replace('0', scheduleId);

                var csrfToken = getCSRFToken();
                if (!csrfToken) {
                    console.error('CSRF令牌未找到');
                    showAlert('安全验证失败，请刷新页面重试', 'danger');
                    return;
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: {
                        'X-CSRFToken': csrfToken
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data.success) {
                            // 关闭模态框
                            scheduleModal.hide();

                            // 从日历中移除事件
                            var event = calendar.getEventById(scheduleId);
                            if (event) {
                                event.remove();
                            }
                            
                            // 显示成功消息
                            showAlert('删除成功', 'success');
                        } else {
                            showAlert('删除失败: ' + data.message, 'danger');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('删除错误详情:');
                        console.error('状态:', status);
                        console.error('错误:', error);
                        console.error('响应:', xhr.responseText);
                        
                        var errorMsg = '删除失败';
                        if (xhr.status === 0) {
                            errorMsg = '网络连接失败，请检查网络';
                        } else if (xhr.status === 403) {
                            errorMsg = '权限验证失败，请重新登录';
                        } else if (xhr.status === 404) {
                            errorMsg = '请求地址不存在';
                        } else if (xhr.status === 500) {
                            errorMsg = '服务器内部错误';
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        } else if (xhr.responseText) {
                            errorMsg = '错误: ' + xhr.responseText.substring(0, 100);
                        }
                        
                        showAlert(errorMsg, 'danger');
                    }
                });
            }
        });

        // 保存日程按钮点击事件 - 简化测试版本
        console.log('开始绑定保存按钮事件...');
        console.log('保存按钮元素:', $('#saveSchedule'));
        console.log('保存按钮长度:', $('#saveSchedule').length);
        
        // 使用原生JavaScript测试事件绑定
        setTimeout(function() {
            var saveBtn = document.getElementById('saveSchedule');
            if (saveBtn) {
                console.log('找到保存按钮元素:', saveBtn);
                saveBtn.addEventListener('click', function(e) {
                    console.log('=== 原生点击事件触发 ===');
                    console.log('事件对象:', e);
                    console.log('按钮文本:', this.textContent);
                    
                    // 简单的表单验证
                    var scheduleDate = document.getElementById('scheduleDate').value;
                    var isClassDay = document.getElementById('isClassDay').value;
                    
                    console.log('日期值:', scheduleDate);
                    console.log('状态值:', isClassDay);
                    
                    if (!scheduleDate) {
                        alert('请选择日期');
                        return;
                    }
                    
                    // 创建测试请求
                    console.log('准备发送测试请求...');
                    var formData = new FormData(document.getElementById('scheduleForm'));
                    console.log('表单数据:');
                    for (var pair of formData.entries()) {
                        console.log(pair[0] + ': ' + pair[1]);
                    }
                    
                    // 获取CSRF令牌
                    var csrfToken = document.querySelector('input[name=csrfmiddlewaretoken]').value;
                    console.log('CSRF令牌:', csrfToken);
                    
                    // 发送测试请求
                    var scheduleId = document.getElementById('scheduleId').value;
                    var baseUrl = window.location.origin;
                    var url = scheduleId ? 
                        baseUrl + '/core/schedule-manager/grade/{{ grade.id }}/ajax/update/' + scheduleId + '/' :
                        baseUrl + '/core/schedule-manager/grade/{{ grade.id }}/ajax/create/';
                    
                    console.log('请求URL:', url);
                    
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('请求成功:', data);
                        alert('保存成功: ' + (data.message || '操作完成'));
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        alert('保存失败: ' + error.message);
                    });
                });
            } else {
                console.error('未找到保存按钮元素');
            }
        }, 1000);
            
            // 表单验证
            var scheduleDate = $('#scheduleDate').val();
            var isClassDay = $('#isClassDay').val();
            
            console.log('日期:', scheduleDate);
            console.log('状态:', isClassDay);
            
            if (!scheduleDate) {
                showAlert('请选择日期', 'warning');
                return;
            }

            var formData = $('#scheduleForm').serialize();
            console.log('表单数据:', formData);
            
            var scheduleId = $('#scheduleId').val();
            var url = scheduleId ? 
                '{% url 'core:grade_leader_schedule_update_ajax' grade_id=grade.id pk=0 %}'.replace('0', scheduleId) : 
                '{% url 'core:grade_leader_schedule_create_ajax' grade_id=grade.id %}';

            // 获取CSRF令牌
            function getCSRFToken() {
                return $.cookie('csrftoken') || $('input[name=csrfmiddlewaretoken]').val() || $('meta[name=csrf-token]').attr('content');
            }

            var csrfToken = getCSRFToken();
            if (!csrfToken) {
                console.error('CSRF令牌未找到');
                showAlert('安全验证失败，请刷新页面重试', 'danger');
                return;
            }

            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                },
                data: formData,
                dataType: 'json',
                beforeSend: function() {
                    // 显示加载状态
                    $('#saveSchedule').prop('disabled', true).text('保存中...');
                },
                success: function(data) {
                    if (data.success) {
                        // 关闭模态框
                        scheduleModal.hide();
                        
                        // 更新日历事件
                        if (scheduleId) {
                            // 编辑现有事件
                            var event = calendar.getEventById(scheduleId);
                            if (event) {
                                // 根据返回的is_class_day值设置标题和颜色
                                let title, color;
                                switch(parseInt(data.is_class_day)) {
                                    case 1:
                                        title = '正常上课';
                                        color = 'green';
                                        break;
                                    case 2:
                                        title = '调休';
                                        color = 'blue';
                                        break;
                                    case 3:
                                        title = '课后服务';
                                        color = 'purple';
                                        break;
                                    case 4:
                                        title = '考试';
                                        color = 'red';
                                        break;
                                    default:
                                        title = '休息日';
                                        color = 'gray';
                                }
                                event.setProp('title', title);
                                event.setProp('color', color);
                            }
                        } else {
                            // 添加新事件
                            let color;
                            switch(parseInt(data.is_class_day)) {
                                case 1:
                                    color = 'green';
                                    break;
                                case 2:
                                    color = 'blue';
                                    break;
                                case 3:
                                    color = 'purple';
                                    break;
                                case 4:
                                    color = 'red';
                                    break;
                                default:
                                    color = 'gray';
                            }
                            calendar.addEvent({
                                id: data.id,
                                title: data.is_class_day == 1 ? '正常上课' : 
                                       data.is_class_day == 2 ? '调休' : 
                                       data.is_class_day == 3 ? '课后服务' : 
                                       data.is_class_day == 4 ? '考试' : '休息日',
                                start: data.date,
                                color: color,
                                allDay: true
                            });
                        }

                        // 显示成功消息
                        showAlert(scheduleId ? '更新成功' : '添加成功', 'success');
                    } else {
                        showAlert('保存失败: ' + data.message, 'danger');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('保存错误详情:');
                    console.error('状态:', status);
                    console.error('错误:', error);
                    console.error('响应:', xhr.responseText);
                    
                    var errorMsg = '保存失败';
                    if (xhr.status === 0) {
                        errorMsg = '网络连接失败，请检查网络';
                    } else if (xhr.status === 403) {
                        errorMsg = '权限验证失败，请重新登录';
                    } else if (xhr.status === 404) {
                        errorMsg = '请求地址不存在';
                    } else if (xhr.status === 500) {
                        errorMsg = '服务器内部错误';
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        errorMsg = '错误: ' + xhr.responseText.substring(0, 100);
                    }
                    
                    showAlert(errorMsg, 'danger');
                },
                complete: function() {
                    // 恢复按钮状态
                    $('#saveSchedule').prop('disabled', false).text('保存');
                }
            });
        });

        // 关闭按钮和背景点击事件
        $('.btn-close, .btn-secondary').on('click', function() {
            scheduleModal.hide();
        });

        // 自定义消息提示函数
        function showAlert(message, type) {
            var alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            $('#calendar').before(alertHtml);
            // 3秒后自动关闭
            setTimeout(function() {
                $('.alert').alert('close');
            }, 3000);
        }
        
        // 全局错误处理
        window.addEventListener('error', function(e) {
            console.error('全局错误:', e.error);
            console.error('错误信息:', e.message);
            console.error('错误位置:', e.filename, ':', e.lineno);
        });
        
        // 检查URL生成
        console.log('URL检查:');
        console.log('创建URL模板:', '{% url "core:grade_leader_schedule_create_ajax" grade_id=grade.id %}');
        console.log('更新URL模板:', '{% url "core:grade_leader_schedule_update_ajax" grade_id=grade.id pk=0 %}');
    });
</script>
{% endblock %}